<template>
  <view class="container">
    <block v-if="isload">
      <block v-if="express_com == '货运托运'">
        <view class="orderinfo">
          <block v-if="datalist.pic">
            <view class="item">
              <text class="t1">物流单照片</text>
            </view>
            <view class="item">
              <image
                class="t2"
                :src="datalist.pic"
                @tap="previewImage"
                :data-url="datalist.pic"
                mode="widthFix"
              />
            </view>
          </block>
          <view class="item" v-if="datalist.fhname">
            <text class="t1">发货人信息</text>
            <text class="t2">{{ datalist.fhname }}</text>
          </view>
          <view class="item" v-if="datalist.fhaddress">
            <text class="t1">发货地址</text>
            <text class="t2">{{ datalist.fhaddress }}</text>
          </view>
          <view class="item" v-if="datalist.shname">
            <text class="t1">收货人信息</text>
            <text class="t2">{{ datalist.shname }}</text>
          </view>
          <view class="item" v-if="datalist.shaddress">
            <text class="t1">收货地址</text>
            <text class="t2">{{ datalist.shaddress }}</text>
          </view>
          <view class="item" v-if="datalist.remark">
            <text class="t1">备注</text>
            <text class="t2">{{ datalist.remark }}</text>
          </view>
        </view>
      </block>
      <block v-else>
        <view class="expressinfo">
          <!-- <view class="head">
						<view class="f1">
							<image :src="static_url + '/static/img/feiji.png'"></image>
						</view>
						<view class="f2">
							<view class="t1">快递公司：<text style="color:#333">{{express_com}}</text></view>
							<view class="t2">快递单号：<text style="color:#333">{{express_no}}</text></view>
						</view>
					</view> -->
          <view class="content">
            <view class="content-title">
              <view class="content-title-left">
                <view class="feiji">
                  <image
                    class="feiji"
                    :src="static_url + '/static/img/location/direct-icon.png'"
                  >
                  </image>
                </view>
                <view class="">
                  <!-- <text class="express_com">{{
                    detail.express_com == null ||
                    detail.express_com == undefined
                      ? ""
                      : detail.express_com
                  }}</text>
                  <text class="express_no">{{
                    detail.express_no == null || detail.express_no == undefined
                      ? ""
                      : detail.express_no
                  }}</text> -->
                  <text class="express_com">{{ express_com }}</text>
                  <text class="express_no">{{ express_no }}</text>
                </view>
              </view>
              <view
                class="copy-btn"
                @tap.stop="copy"
                :data-text="express_no"
                v-if="express_com && express_no"
              >
                复制
              </view>
            </view>
            <block v-if="data_list.type == 2">
              <scroll-view scroll-x>
                <view class="tab-header">
                  <view
                    v-for="(tab, index) in data_list.datalist"
                    :key="index"
                    class="tab-item"
                    :class="{ active: currentTab == index }"
                    @tap="switchTab(index, tab)"
                  >
                    {{ tab.express_no.split(":")[0] }}
                  </view>
                </view>
              </scroll-view>
            </block>
            <view class="address">
              <text>收货地址：</text> {{ re.return_province }}{{ re.return_city
              }}{{ re.return_area }}{{ re.return_address }}
            </view>
            <view
              v-for="(item, index) in datalist"
              :key="index"
              :class="'item ' + (index == 0 ? 'on' : '')"
            >
              <view class="f1">
                <view v-if="item.status == '运输中'">
                  <view v-if="hideIndex == index">
                    <image
                      src="https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250217/8953d279d7a7b458fc7d391e26a7cc3e.png"
                    >
                    </image>
                  </view>
                  <view v-if="hideIndex !== index" class="dot">
                    <image
                      class="dot-img"
                      src="/static/img/dot1.png"
                      mode=""
                    ></image>
                  </view>
                </view>
                <view v-if="item.status == '派送中'">
                  <image
                    src="https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250217/f13fd675bd4357f9d9595d2304b08e08.png"
                  >
                  </image>
                </view>
                <view v-if="item.status == '已签收'">
                  <image
                    :src="static_url + '/static/img/location/circle-icon.png'"
                  ></image>
                </view>
              </view>
              <view class="f2">
                <text
                  class="status"
                  v-if="
                    hideIndex == index ||
                    item.status == '派送中' ||
                    item.status == '已签收'
                  "
                  >{{ item.status }}</text
                >
                <text class="t1">{{ item.AcceptStation }}</text>
                <text class="t2 t2-time">{{ item.AcceptTime }}</text>
              </view>
            </view>
            <nodata v-if="nodata" text="暂未查找到物流信息"></nodata>
          </view>
        </view>
      </block>
    </block>
    <loading v-if="loading"></loading>
    <dp-tabbar :opt="opt"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,

      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      nodata: false,
      express_com: "",
      express_no: "",
      type: "",
      datalist: [],

      orderinfo: {},
      prolist: [],
      binfo: {},
      psuser: {},
      psorder: {},
      shop_tel: "",
      detail: "",
      re: {},
      hideIndex: null,
      currentTab: null,
      data_list: [],
      data_type: {},
      currentExpressNo: "",
    };
  },

  onLoad: function (opt) {
    this.opt = app.getopts(opt);
    if (opt.jf_type == 1) {
      this.getjfdetail();
    }
    this.getdata();
    this.getdetail();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },
  onPullDownRefresh: function () {
    this.getdata();
  },
  methods: {
    getjfdetail: function () {
      var that = this;
      that.loading = true;
      app.get(
        "ApiScoreshop/orderdetail",
        {
          id: that.opt.id,
        },
        function (res) {
          that.loading = false;

          that.detail = res.detail;
          that.re = res.return;
        }
      );
    },
    getdetail: function () {
      var that = this;
      that.loading = true;
      app.get(
        "Order/refundDetail",
        {
          id: that.opt.id,
        },
        function (res) {
          that.loading = false;

          that.detail = res.detail;
          that.re = res.return;
        }
      );
    },
    switchTab(index, item) {
      this.currentTab = index;
      // 处理 datalist，添加状态字段
      this.datalist = item.logistics.map((i) => {
        let status = "运输中"; // 默认状态是 运输中

        // 确保 AcceptStation 是字符串，并且进行相关判断
        if (typeof i.AcceptStation === "string") {
          if (
            i.AcceptStation.includes("派送中") &&
            i.AcceptStation.includes("签收")
          ) {
            // 如果两个关键字都包含，选择先出现的那个
            if (
              i.AcceptStation.indexOf("派送中") <
              i.AcceptStation.indexOf("签收")
            ) {
              status = "派送中";
            } else {
              status = "已签收";
            }
          } else if (i.AcceptStation.includes("签收")) {
            status = "已签收";
          } else if (i.AcceptStation.includes("派送中")) {
            status = "派送中";
          }
        }

        return {
          ...i,
          status: status, // 添加 status 字段
        };
      });

      // 查找第一个“运输中”的索引并更新
      for (var index = 0; index < this.datalist.length; index++) {
        var element = this.datalist[index];
        if (element.status == "运输中") {
          this.hideIndex = index;
          break;
        }
      }
    },
    getdata: function () {
      var that = this;

      that.express_com = that.opt.express_com;
      that.express_no = that.opt.express_no;
      that.type = that.opt.type;

      that.loading = true;
      app.get(
        "Order/refundLogistics",
        {
          express_com: that.express_com,
          express_no: that.express_no,
          type: that.type,
          order_id: that.opt.id,
        },
        function (res) {
          that.loading = false;

          if (that.express_com == "同城配送") {
            that.orderinfo = res.orderinfo;
            that.prolist = res.prolist;
            that.binfo = res.binfo;
            that.psorder = res.psorder;
            that.psuser = res.psuser;
            if (res.shop_tel) {
              that.shop_tel = res.shop_tel;
            }

            // 每10秒刷新数据，避免重复请求
            if (!that.loading) {
              setTimeout(function () {
                that.getdata();
              }, 10000); // 10秒后重新请求
            }
          } else {
            var datalist = res.data.datalist;
            that.data_list = res.data;
            if (datalist.length < 1) {
              that.nodata = true;
              return; // 如果没有数据，直接返回
            }
            if (res.data.type == 1) {
              // 处理 datalist，添加状态字段
              that.datalist = datalist.map((item) => {
                let status = "运输中"; // 默认状态是 运输中

                // 确保 AcceptStation 是字符串，并且进行相关判断
                if (typeof item.AcceptStation === "string") {
                  if (
                    item.AcceptStation.includes("派送中") &&
                    item.AcceptStation.includes("签收")
                  ) {
                    // 如果两个关键字都包含，选择先出现的那个
                    if (
                      item.AcceptStation.indexOf("派送中") <
                      item.AcceptStation.indexOf("签收")
                    ) {
                      status = "派送中";
                    } else {
                      status = "已签收";
                    }
                  } else if (item.AcceptStation.includes("签收")) {
                    status = "已签收";
                  } else if (item.AcceptStation.includes("派送中")) {
                    status = "派送中";
                  }
                }

                return {
                  ...item,
                  status: status, // 添加 status 字段
                };
              });

              // 查找第一个“运输中”的索引并更新
              for (var index = 0; index < that.datalist.length; index++) {
                var element = that.datalist[index];
                if (element.status == "运输中") {
                  that.hideIndex = index;
                  break;
                }
              }
            }
            if (res.data.type == 2) {
              datalist.forEach((item) => {
                let express_no = item.express_no.split(":")[0];

                let matchedOrder = datalist.find(
                  (item) =>
                    item.express_com == that.express_com &&
                    express_no == that.express_no
                );
                if (matchedOrder) {
                  that.datalist = matchedOrder.logistics;
                  // 处理 datalist，添加状态字段
                  that.datalist = item.logistics.map((item) => {
                    let status = "运输中"; // 默认状态是 运输中

                    // 确保 AcceptStation 是字符串，并且进行相关判断
                    if (typeof item.AcceptStation === "string") {
                      if (
                        item.AcceptStation.includes("派送中") &&
                        item.AcceptStation.includes("签收")
                      ) {
                        // 如果两个关键字都包含，选择先出现的那个
                        if (
                          item.AcceptStation.indexOf("派送中") <
                          item.AcceptStation.indexOf("签收")
                        ) {
                          status = "派送中";
                        } else {
                          status = "已签收";
                        }
                      } else if (item.AcceptStation.includes("签收")) {
                        status = "已签收";
                      } else if (item.AcceptStation.includes("派送中")) {
                        status = "派送中";
                      }
                    }

                    return {
                      ...item,
                      status: status, // 添加 status 字段
                    };
                  });

                  // 查找第一个“运输中”的索引并更新
                  for (var index = 0; index < that.datalist.length; index++) {
                    var element = that.datalist[index];
                    if (element.status == "运输中") {
                      that.hideIndex = index;
                      break;
                    }
                  }
                } else {
                  console.log("没有找到匹配的订单");
                }
              });
            }
          }

          that.loaded();
        }
      );
    },

    call: function (e) {
      var tel = e.currentTarget.dataset.tel;
      uni.makePhoneCall({
        phoneNumber: tel,
      });
    },
  },
};
</script>
<style>
.expressinfo .head {
  width: 100%;
  background: #fff;
  margin: 20rpx 0;
  padding: 20rpx 20rpx;
  display: flex;
  align-items: center;
}

.expressinfo .head .f1 {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}

.expressinfo .head .f1 image {
  width: 100%;
  height: 100%;
}

.expressinfo .head .f2 {
  display: flex;
  flex-direction: column;
  flex: auto;
  font-size: 30rpx;
  color: #999999;
}

.expressinfo .head .f2 .t1 {
  margin-bottom: 8rpx;
}

.expressinfo .content {
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  color: #979797;
  padding: 20rpx 40rpx;
}

.expressinfo .content .on {
  color: #000;
}

.expressinfo .content .item {
  display: flex;
  width: 96%;
  margin: 0 2%;
  border-left: 1px #dadada solid;
  padding: 10rpx 0;
}

.expressinfo .content .item .f1 {
  width: 40rpx;
  flex-shrink: 0;
  position: relative;
}

.expressinfo .content .item .f1 image {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  left: -16rpx;
  top: 22rpx;
}

/*.content .on image{ top:-1rpx}*/
.expressinfo .content .item .f1 image {
  width: 30rpx;
  height: 30rpx;
}

.expressinfo .content .item .f2 {
  display: flex;
  flex-direction: column;
  flex: auto;
}

.expressinfo .content .item .f2 .t1 {
  font-size: 30rpx;
}

.expressinfo .content .item .f2 .t1 {
  font-size: 26rpx;
}

.map {
  width: 100%;
  height: 500rpx;
  overflow: hidden;
}

.ordertop {
  width: 100%;
  height: 220rpx;
  padding: 50rpx 0 0 70rpx;
}

.ordertop .f1 {
  color: #fff;
}

.ordertop .f1 .t1 {
  font-size: 32rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.ordertop .f1 .t2 {
  font-size: 24rpx;
}

.order-box {
  width: 94%;
  margin: 20rpx 3%;
  padding: 6rpx 3%;
  background: #fff;
  border-radius: 8px;
}

.order-box .head {
  display: flex;
  width: 100%;
  border-bottom: 1px #f5f5f5 solid;
  height: 88rpx;
  line-height: 88rpx;
  overflow: hidden;
  color: #999;
}

.order-box .head .f1 {
  display: flex;
  align-items: center;
  color: #222222;
}

.order-box .head .f1 .img {
  width: 24rpx;
  height: 24rpx;
  margin-right: 4px;
}

.order-box .head .f1 .t1 {
  color: #06a051;
  margin-right: 10rpx;
}

.order-box .head .f2 {
  color: #ff6f30;
}

.order-box .head .f2 .t1 {
  font-size: 36rpx;
  margin-right: 4rpx;
}

.order-box .content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 16rpx 0px;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}

.order-box .content .f1 {
  width: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-box .content .f1 .t1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-box .content .f1 .t1 .x1 {
  color: #ff6f30;
  font-size: 28rpx;
  font-weight: bold;
}

.order-box .content .f1 .t1 .x2 {
  color: #999999;
  font-size: 24rpx;
  margin-bottom: 8rpx;
}

.order-box .content .f1 .t2 .img {
  width: 12rpx;
  height: 36rpx;
}

.order-box .content .f1 .t3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-box .content .f1 .t3 .x1 {
  color: #ff6f30;
  font-size: 28rpx;
  font-weight: bold;
}

.order-box .content .f1 .t3 .x2 {
  color: #999999;
  font-size: 24rpx;
}

.order-box .content .f2 {
}

.order-box .content .f2 .t1 {
  font-size: 36rpx;
  color: #222222;
  font-weight: bold;
  line-height: 50rpx;
  margin-bottom: 6rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.order-box .content .f2 .t2 {
  font-size: 24rpx;
  color: #222222;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.order-box .content .f2 .t3 {
  font-size: 36rpx;
  color: #222222;
  font-weight: bold;
  line-height: 50rpx;
  margin-top: 30rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.order-box .content .f3 .img {
  width: 72rpx;
  height: 168rpx;
}

.orderinfo {
  width: 94%;
  margin: 20rpx 3%;
  margin-top: 10rpx;
  padding: 14rpx 3%;
  background: #fff;
  border-radius: 8px;
}

.orderinfo .box-title {
  color: #161616;
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-weight: bold;
}

.orderinfo .item {
  display: flex;
  width: 100%;
  padding: 10rpx 0;
}

.orderinfo .item .t1 {
  width: 200rpx;
  color: #161616;
}

.orderinfo .item .t2 {
  flex: 1;
  text-align: right;
  color: #222222;
}

.orderinfo .item .red {
  color: red;
}

.bottom {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  height: 100rpx;
}

.bottom .f1 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 20rpx;
  color: #373c55;
  border-right: 1px solid #eaeeed;
}

.bottom .f1 .img {
  width: 44rpx;
  height: 44rpx;
}

.bottom .f2 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 20rpx;
  color: #373c55;
}

.bottom .f2 .img {
  width: 44rpx;
  height: 44rpx;
}

.bottom .btn1 {
  width: 100%;
  background: linear-gradient(-90deg, #06a051 0%, #03b269 100%);
  height: 100rpx;
  line-height: 100rpx;
  color: #fff;
  text-align: center;
  font-size: 32rpx;
}

.status {
  font-weight: 700;
  margin-top: 20rpx;
}

.address {
  color: #999;
  font-size: 24rpx;
}

.feiji {
  width: 50rpx;
  height: 50rpx;
}

.content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  margin-bottom: 10rpx;
}

.content-title-left {
  display: flex;
  align-items: center;
}

.express_com {
  margin: 0 10rpx;
}

.copy-btn {
  border: 1px solid #ccc;
  padding: 6rpx 10rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  background-color: #e7e7e7;
}

.t2-time {
  margin-top: 6rpx;
}

.dot-img {
  position: absolute;
  left: -12rpx !important;
  width: 20rpx !important;
  height: 20rpx !important;
}

.tab-header {
  display: flex;
  padding: 20rpx 0;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #000;
  position: relative;
  padding: 0 10rpx;
}

.tab-item.active {
  color: #000;
  font-weight: bold;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  /* background: #ff6b81; */
}
</style>
